<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登录注册</title>
	<!-- title前面ic图标的引入 -->
	<link rel="icon" href="/home/images/bjy.ico">

	<link rel="stylesheet" type="text/css" href="/home/css/member_style.css">
	<link rel="stylesheet" type="text/css" href="/home/css/member.css">
	<style>
		/*iconfont==S*/
		@font-face {
		  font-family: 'iconfont';
		  src: url('/home/font/iconfont.eot');
		  src: url('/home/font/iconfont.eot?#iefix') format('embedded-opentype'),
		  url('/home/font/iconfont.woff') format('woff'),
		  url('/home/font/iconfont.ttf') format('truetype'),
		  url('/home/font/iconfont.svg#iconfont') format('svg');
		}
		
		.iconfont{
		  font-family:"iconfont" !important;
		  font-size:16px;font-style:normal;
		  color: #1A1B1C;
		  margin-left: 10px;
		  margin-top: 10px;
		}

		/*iconfont==E*/


		body{background-color: #2D2D2D}
		/*登录框==E*/
		span.reference{
            position:fixed;
            left:5px;
            top:5px;
            font-size:10px;
            text-shadow:1px 1px 1px #fff;
        }
        span.reference a{
            color:#555;
            text-decoration:none;
			text-transform:uppercase;
        }
        span.reference a:hover{
            color:#000;
            
        }
        h1{
            color:#ccc;
            font-size:36px;
            text-shadow:1px 1px 1px #fff;
            padding:20px;
        }

        #goumaihuiyuan{
            width: 150px;
            height: 150px;
            background: pink;
            margin-top: 80px;
            margin-left: 200px;
        }
        /*登录框==S*/
	</style>

</head>
<body>
	<div class="top_banner"></div>

	<!-- <div class="box"> -->
		
		<div id="content">
            <h1>登录/注册页</h1>
            <div id="wrapper">
                <div id="steps">
                    <form id="formElem" method="post" name="formElem" action="">
                        <fieldset class="step">
                            <legend>账户信息</legend>
                            <p>
                                <label for="username">用户名</label>
                                    <!-- <input id="username" name="username" AUTOCOMPLETE=OFF/> -->
                                    <input id="username" name="username"/>
                            </p>
                            
                            <p>
                                <label for="password">密码</label>
                                <input id="password" name="password" type="password" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="password2">密码</label>
                                <input id="password2" name="password2" type="password" AUTOCOMPLETE=OFF />
                            </p>
                        </fieldset>
                        <fieldset class="step">
                            <legend>个人信息</legend>
                            <p>
                                <label for="gender">性别</label>
                                <select id="gender" name="gender">
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                    <option value="3">保密</option>
                                </select>
                            </p>
                            <p>
                                <label for="mobile">手机号</label>
                                <input id="phone" name="mobile" type="tel" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="email">Email</label>
                                <input id="email" name="email" placeholder="info@htmleaf.com" type="email" AUTOCOMPLETE=OFF />
                            </p>
                        </fieldset>
                        <fieldset class="step">
                            <legend>短信验证码</legend>
                            <p>
                                <label for="code">请输入验证码</label>
                                <input id="code" name="code" type="text" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <input type="button" onclick="send(this)" value="获取短信验证码"></input>
                            </p>
                        </fieldset>
                        <fieldset class="step">
                            <legend>购买会员</legend>
                            <div id="goumaihuiyuan">
                                <button id="huiyuan_1">购买会员（20&yen;）</button>
                                <button id="huiyuan_2">购买尊贵会员（40&yen;）</button>
                            </div>
                        </fieldset>
						<fieldset class="step">
                            <legend>Confirm</legend>
							<p>
								Everything in the form was correctly filled 
								if all the steps have a green checkmark icon.
								A red checkmark icon indicates that some field 
								is missing or filled out with invalid data. In this
								last step the user can confirm the submission of
								the form.
							</p>
                            <p class="submit">
                                <button id="registerButton" type="submit">立即注册</button>
                                <!-- <button id="registerButton" onclick="zhuce()" type="submit">立即注册</button> -->
                            </p>
                        </fieldset>
                        {{csrf_field()}}
                    </form>
                </div>
                <div id="navigation" style="display:none;">
                    <ul>
                        <li class="selected">
                            <a href="#">下一步<span class="iconfont">&#xe600;</span></a>
                        </li>
                        <li>
                            <a href="#">下一步<span class="iconfont">&#xe600;</span></a>
                        </li>
                         <li>
                            <a href="#">短信验证码</a>
                        </li>
                        <li>
                            <a href="#">购买会员</a>
                        </li>
						<li>
                            <a href="#">注册</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


	<!-- </div> -->


	<!-- 背景div -->
	<div id="mydiv" style="height:500px;"></div>
	<script type="text/javascript">
		window.onload = function() {
		    //配置
		    var config = {
		        vx: 4,	//小球x轴速度,正为右，负为左
		        vy: 4,	//小球y轴速度
		        height: 2,	//小球高宽，其实为正方形，所以不宜太大
		        width: 2,
		        count: 200,		//点个数
		        color: "121, 162, 185", 	//点颜色
		        stroke: "130,255,255", 		//线条颜色
		        dist: 6000, 	//点吸附距离
		        e_dist: 20000, 	//鼠标吸附加速距离
		        max_conn: 10 	//点到点最大连接数
		    }

		    //调用
		    CanvasParticle(config);
		}
	</script>
	<script type="text/javascript" src="/home/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="/home/js/member_canvas_particle.js"></script>
	<script type="text/javascript" src="/home/js/member_sliding.form.js"></script>
    <!-- 引入layer -->
    <script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"></script>
    <!-- 引入jQ自动验证 -->
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>

	   
    <script type="text/javascript">
        
        // 短信验证码的前台样式==S
        //初始化倒计时的时间
        var time = 60;
        function send(_this) {
            //发送ajax
            var mobile = $('input[name=mobile]').val();
            // console.log(mobile);
            //一次倒计时发送一次短信
            if(time == 60) {
                $.ajax({
                    headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' },
                    type: 'post',
                    url: '/home/member/sendCode',
                    data: {mobile: mobile},
                    dataType: 'json',
                    success: function(data){
                        if(data.error_code == '0'){
                            layer.alert('发送成功');
                        }else{
                            layer.alert('发送失败');
                        }

                    }
                });
            }
            if(time == 0){
                _this.removeAttribute("disabled");
                _this.value = "获取短信验证码";
                time = 60;
                return;
            }else{
                _this.setAttribute("disabled",true);
                _this.value = "重新发送(" + time + "s)";
                time--;
            }
            //定时器
            setTimeout(function(){
                send(_this);
            },1000);
        }
        //短信验证码==E




    //提交表单的数据
    // function zhuce(){
    //     $ajax({
    //         type: "post",
    //         url: "",
    //     })
    // }



 $(function(){

        // huiyuan_1
        $('#huiyuan_1').click(function(e){
            layer.open({
              // type: 2,
              type: 2,
              title: '请使用微信付款',
              skin: 'layui-layer-rim', //加上边框
              area: ['160px', '220px'], //宽高
              content: '/home/member/pay?id=1',
            });
            e.preventDefault();
        });
        // huiyuan_2
        $('#huiyuan_2').click(function(e){
            layer.open({
              // type: 2,
              type: 2,
              title: '请使用微信付款',
              skin: 'layui-layer-rim', //加上边框
              area: ['160px', '220px'], //宽高
              content: '/home/member/pay?id=2',
            });
            e.preventDefault();
        });



        //提交
        $("#formElem").validate({
        rules:{
            username:{
                required:true,
                minlength:4,
                maxlength:16
            },
            password:{
                required:true,
            },
            password2:{
                required:true,
                equalTo: "#password"
            },
            gender:{
                required:true,
            },
            mobile:{
                required:true,
                isPhone:true,
            },
            email:{
                required:true,
                email:true,
            },
            code:{
             required:true,
            },
        },
        onkeyup: false,
        focusCleanup: true,
        success: "valid",
        submitHandler: function(form) {
            var result = 1;
            $.ajax({
               type: "post",  
               url: "",  
               contentType : "application/x-www-form-urlencoded; charset=UTF-8",  
               data: { books: JSON.stringify(data), txtPass: "123" },  
               async: false,
               success: function (res) {  
                    // alert('hello world');
                   //alert(res);  
                   return 2;
               }  
            });

            // alert(result);

            // $(form).ajaxSubmit({
            //     type: 'post',
            //     url: "",
            //     success: function(data) {
            //         if(data == '2'){
            //             layer.msg('短信验证码错误!', { icon: 2, time: 1000 });
            //             // layer.msg('添加成功!', { icon: 1, time: 1000 },function(){
            //             //     var index = parent.layer.getFrameIndex(window.name);
            //             //     //parent.$('.btn-refresh').click();
            //             //     parent.location.href = parent.location.href;
            //             //     parent.layer.close(index);
            //             // });
            //         }else{
            //             layer.msg('423短信验证码错误!', { icon: 2, time: 1000 });
            //         }
            //     },
            //     error: function(XmlHttpRequest, textStatus, errorThrown) {
            //         layer.msg('error!', { icon: 1, time: 1000 });
            //     }
            // });//ajax请求
        }

    });

})
    </script>

</body>
</html>
